<template>
  <div id="big-data-container" class="big-data-container">
    <div class="head">
      <span class="timeclass" style="float: left; padding: 0px 20px"> {{ date }}</span>
      <h1>
        西安冰雪营收数据统计
      </h1>
    </div>
    <div class="data-container">
      <div class="data-left">
        <div class="data-left-item">
          <div class="dataWrap">
            <div class="data-left-font">
              公告:
              暂无公告
            </div>
            <div class="data-left-font">
              日期:
              {{ date.slice(0, 10) }}
            </div>
            <div class="data-left-font">
              天气:
              阳光明媚
            </div>
            <div class="data-left-font">
              雪道开放情况:
              正常营业
            </div>
          </div>
          <div class="data-foot-line"></div>
          <!-- <div class="title">各项营收占比(万元)</div>
          <div id="chart-left-1" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div> -->
        </div>
        <div class="data-left-item">
          <div class="title">客源地TOP10</div>
          <div class="scroll_item" style="margin:0;background:#0066FF">
            <div class="isddd" style="width: 30%;">排名</div>
            <div class="isddd" style="width: 50%;">地区</div>
            <div class="isddd" style="width: 20%;">数量</div>
          </div>
          <div class="InfiniteScroll">
            <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
              <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                <div ref="scrollItemBox">
                  <div class="scroll_item" v-for="(item, index) in listData" :key="index" @click="goFun()">

                    <div class="isddd" style="width: 30%;">{{ index + 1 }}</div>
                    <div class="isddd" style="width: 50%;">{{ item.name }}</div>
                    <div class="isddd" style="width: 20%;">{{ item.person }}</div>
                  </div>
                </div>
                <div v-html="copyHtml"></div>
              </div>
            </div>
          </div>
          <div class="data-foot-line"></div>
        </div>

        <div class="data-left-item data-left-item-4; ">
          <div class="data-rightttecahs">
            <div class="data-right-sex">
              <div class="title">性别占比</div>
              <div id="chart-left-4" style="height: 100%;padding:0 20px"></div>

              <div class="data-foot-line"></div>
            </div>
            <div class="data-right-sex">
              <div class="title">年龄占比</div>
              <div id="chart-left-5" style="height: 100%;padding:0 20px"></div>
              <div class="data-foot-line"></div>
            </div>
          </div>

        </div>
      </div>
      <div class="data-center">
        <!-- <div class="title">中间位置</div> -->
        <div class="data-left-item" style="padding-top: 50px;margin-bottom: 0.9rem;">
          <div class="center-top-num-flex">
            <div class="item">
              <div class="text">当前入园人次</div>
              <div class="num">{{ contentNum.current || 523 }}</div>
            </div>
            <div class="item">
              <div class="text">当前滑雪人数</div>
              <div class="num">{{ contentNum.revenue || 199 }}</div>
            </div>
            <div class="item">
              <div class="text">累计滑雪人数</div>
              <div class="num">{{ contentNum.budget || 2342 }}</div>
            </div>
            <div class="data-foot-line"></div>
          </div>
          <iview-circle :size="200" style="padding: 8px 0"></iview-circle>
          <div class="data-foot-line"></div>
        </div>
        <div class='center-top' style="height: calc(100%); margin-bottom: 0.9rem;">
          <div class="title">区域过闸人数</div>
          <div id="chart-center" class="chart-center" style="height: calc(100%) "></div>
          <div class="data-foot-line"></div>
        </div>
      </div>

      <div class="data-right">
        <div class="data-right-item">
          <div class="title">核销占比</div>
          <div id="chart-right-1" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item right-3">
          <div class="title">热销产品TOP5</div>
          <div id="chart-right-2" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>

        <div class="data-right-item right-3">
          <div class="title">渠道占比</div>
          <div id="chart-right-4" style="height: calc(100%)"></div>
          <div class="data-foot-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import 'echarts/map/js/china'
import {
  chartRight2,
  chartCenter,
  chartRight1,
  chartLeft5,
  chartLeft4,
  aDlist,
  chartRight4
} from './bigdata/chart-optionsXa'
import IviewCircle from './bigdata/IviewCircle'
import './bigdata/layout.less'
let timertwas = null
var echarts = require('echarts')
export default {
  components: {
    'iview-circle': IviewCircle
  },
  data () {
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    let list = aDlist.data
    return {
      date: '',
      contentNum: {
        current: 0,
        revenue: 0,
        budget: 0
      },
      scrollTop: 0, // 列表滚动高度
      speed: 15, // 滚动的速度
      timeDate:null,
      listData: list.slice(0, 10), // 表示有多少个列表项
      copyHtml: '' // 复制多一份防止滚动到后面出现空白
    }
  },
  beforeCreate () {

  },
  created () {
    let timer = setInterval(() => {
      this.contentNum.current++;
      if (this.contentNum.current > 523) {
        // 避免count大于finalNum最终数字显示不对
        this.contentNum.current = 523;
        // 清空定时器
        clearInterval(timer);
        timer = null;
      }
    }, 10);
    let timer1 = setInterval(() => {
      this.contentNum.revenue++;
      if (this.contentNum.revenue > 199) {
        // 避免count大于finalNum最终数字显示不对
        this.contentNum.revenue = 199;
        // 清空定时器
        clearInterval(timer1);
        timer1 = null;
      }
    }, 10);
    let timer2 = setInterval(() => {
      this.contentNum.budget++;
      if (this.contentNum.budget > 2342) {
        // 避免count大于finalNum最终数字显示不对
        this.contentNum.budget = 2342;
        // 清空定时器
        clearInterval(timer2);
        timer2 = null;
      }
    }, 10);
    this.timeDate = setInterval(() => {
      this.date=this.formatLongDate(new Date())
    }, 1000);
  },
  mounted () {
    this.getData()
    this.initScroll()
    this.date=this.formatLongDate(new Date())
    // var $chartLeft1 = echarts.init(document.getElementById('chart-left-1'))
    // $chartLeft1.setOption(chartLeft1)
    // $chartLeft1.resize()

    // var $chartLeft3 = echarts.init(document.getElementById('chart-left-3'))
    // $chartLeft3.setOption(chartLeft3)
    // $chartLeft3.resize()
    // var $chartLeft4 = echarts.init(document.getElementById('chart-left-4'))
    // $chartLeft4.setOption(chartLeft4)
    // $chartLeft4.resize()


    // var $chartLeft5 = echarts.init(document.getElementById('chart-left-5'))
    // $chartLeft5.setOption(chartLeft5)
    // $chartLeft5.resize()

    var $chartRight1 = echarts.init(document.getElementById('chart-right-1'))
    $chartRight1.setOption(chartRight1)
    $chartRight1.resize()

    var $chartRight2 = echarts.init(document.getElementById('chart-right-2'))
    $chartRight2.setOption(chartRight2)
    $chartRight2.resize()

    var $chartRight4 = echarts.init(document.getElementById('chart-right-4'))
    $chartRight4.setOption(chartRight4)
    $chartRight4.resize()

    var $chartCenter = echarts.init(document.getElementById('chart-center'))
    $chartCenter.setOption(chartCenter)
    $chartCenter.resize()

    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    // this.timer = setInterval(() => {
    //    _this.date = _this.formatLongDate(new Date());
    //   this.http.get('https://sr.boss.i-town.cn/kuaibao/skifield', true).then(reslut => {
    //     this.contentNum.current = Number(reslut.data.realTimes)
    //     this.contentNum.revenue = Number(reslut.data.dayTotal)
    //   })
    // }, 1000)

  },
  methods: {
    getStrTime () {
      const now = new Date(); // 获取当前时间
      const year = now.getFullYear(); // 获取当前年份
      const month = now.getMonth(); // 获取当前月份
      const day = now.getDate(); // 获取当前日期
      const zeroTime = new Date(year, month, day); // 当天零点的时间对象
      const zeroTimeTimestamp = zeroTime.getTime(); // 当天零点的时间戳
      return zeroTimeTimestamp
    },
    getEndtime () {
      const now = new Date();
      // 设置为今天
      now.setHours(23, 59, 59, 0); // 时、分、秒、毫秒
      return now.getTime();
    },
    getData () {

let obj = {
  StartTime: this.getStrTime(),
  EndTime: this.getEndtime(),
}
this.http.get('/api/Kuaibao_large_screen_data/GetCustomerTypeTotalXA', obj).then((res) => {
  let obj
  if (res.data.result != "") {
    obj = JSON.parse(res.data.result)
    var listSex = { "code": 200, "msg": "ok", "sex": [{ "value": 139136, "name": "男" }, { "value": 130230, "name": "女" }], "age": [{ "value": 15138, "name": "10岁到20岁之间" }, { "value": 83479, "name": "20岁到30岁之间" }, { "value": 114360, "name": "30岁到40岁之间" }, { "value": 39650, "name": "40岁到50岁之间" }, { "value": 10533, "name": "50岁以上" }] }
    var symbols = [
      "path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z",
      "path://M511.6 190.5c-39.4 0-71.3-39.9-71.3-89.1 0-49.2 31.9-89.1 71.3-89.1s71.3 39.9 71.3 89.1c0 49.2-31.8 89.1-71.3 89.1zM706 500.3c12.4 51-42.5 72.1-55.7 23l-53.8-216h-17.2l94.3 379.5h-88.7V972c0 51.6-63.2 51.6-63.2 0V686.7h-20.4v285.2c0 51.6-65.4 51.6-65.4 0V686.7H349.5l92.4-379.5H427l-53.6 216c-13.6 48-68.6 28.1-55.8-23.1L377.7 266c7-27.1 35.8-73.3 86-75.5h96.6c48.6 2.1 77.7 48.8 85.7 75.3l60 234.5z m0 0"
    ];
    let Genders =obj.Data.Genders
    var bodyMax = Genders[0].person + Genders[1].person;
    var markLineSetting = {
      symbol: "none",
      lineStyle: {
        opacity: 0.3
      }
    };
    var labelSetting = {
      show: true,
      position: "bottom",
      // offset: [0, -20],
      formatter: function (param) {
        return ((param.value / bodyMax) * 100).toFixed(0) + "%";
      },
      textStyle: {
        fontSize: 16,
        fontFamily: "Arial"
      }
    };
    //有用 
   this.chartLeft4 = {
      tooltip: {},
      xAxis: {
        data: ["男", "女"],
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisTick: {
          // 刻度线
          show: false
        },
        axisLine: {
          // 轴线
          show: false
        },
        axisLabel: {
          show: false,
          textStyle: {
            color: "#00badb",
            fontSize: 20
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#393d60"
          }
        }
      },
      grid: {
        top: "center",
        height: '77%'
      },
      markLine: {
        z: -100
      },
      series: [
        {
          name: "男女占比",
          type: "pictorialBar",
          symbolClip: true,
          symbolBoundingData: bodyMax,
          label: labelSetting,
          data: [
            {
              value: Genders[0].person,
              symbol: symbols[0],
              itemStyle: {
                normal: {
                  color: "#1C499A" //单独控制颜色
                }
              }
            },
            {
              value: Genders[1].person,
              symbol: symbols[1],
              itemStyle: {
                normal: {
                  color: "#FF5D5E" //单独控制颜色
                }
              }
            }
          ],
          markLine: markLineSetting,
          z: 10
        },
        {
          //背景图
          // name: "full",
          type: "pictorialBar",
          symbolBoundingData: bodyMax,
          animationDuration: 0,
          itemStyle: {
            color: "#ccc"
          },
          data: [
            {
              value: bodyMax,
              symbol: symbols[0]
            },
            {
              value: bodyMax,
              symbol: symbols[1]
            }
          ],
          // symbolSize: [102, 280]
        }
      ]
    }
    let Ages =obj.Data.Ages
    let ageList=[]
    if(Ages && Ages.length!=0){
      ageList=Ages.map((item)=>{
        return{
          value:item.person,
          name:item.name,
        }
      })
    }
    //有用
    this.chartLeft5 = {
      tooltip: {
        trigger: 'item'
      },
      toolbox: {
        show: true,
      },
      color: ['#91cd77', '#ef6567', '#f9c956', '#75bedc', '#fc8251', '#5470c6',],
      series: [
        {
          name: '年龄占比',
          type: 'pie',
          radius: '30%',
          // center: ['50%', '50%'],
          // roseType: 'area',
          // itemStyle: {
          //   borderRadius: 1
          // },
          data: ageList
        }
      ]
    };
    var $chartLeft4 = echarts.init(document.getElementById('chart-left-4'))
$chartLeft4.setOption(this.chartLeft4)
$chartLeft4.resize()


var $chartLeft5 = echarts.init(document.getElementById('chart-left-5'))
$chartLeft5.setOption(this.chartLeft5)
$chartLeft5.resize()
  this.listData=obj.Data.Areas
  }else{
    var $chartLeft4 = echarts.init(document.getElementById('chart-left-4'))
    $chartLeft4.setOption(chartLeft4)
    $chartLeft4.resize()
    var $chartLeft5 = echarts.init(document.getElementById('chart-left-5'))
    $chartLeft5.setOption(chartLeft5)
    $chartLeft5.resize()
    this.listData=aDlist.data
      }
})
},
    goFun () {
      this.$router.push('/Customer');
    },
    goFunHome () {
      this.$router.push('/home');
    },
    initScroll () {
      this.$nextTick(() => {
        this.copyHtml = this.$refs.scrollItemBox.innerHTML
        this.startScroll()
      })
    },
    // 鼠标移入停止滚动
    mEnter () {
      clearInterval(timertwas)
    },
    // 鼠标移出继续滚动
    mLeave () {
      this.startScroll()
    },
    // 开始滚动
    startScroll () {
      timertwas = setInterval(this.scroll, this.speed)
    },
    // 滚动处理方法
    scroll () {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    formatLongDate (date) {
      let myyear = date.getFullYear()
      let mymonth = date.getMonth() + 1
      let myweekday = date.getDate()
      let myHour = date.getHours()
      let myMin = date.getMinutes()
      let mySec = date.getSeconds()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      if (myHour < 10) {
        myHour = '0' + myHour
      }
      if (myMin < 10) {
        myMin = '0' + myMin
      }
      if (mySec < 10) {
        mySec = '0' + mySec
      }
      return (
        myyear +
        '-' +
        mymonth +
        '-' +
        myweekday +
        ' ' +
        myHour +
        ':' +
        myMin +
        ':' +
        mySec
      )
    },
  },
  beforeDestroy () {
    if (timertwas) {
      clearInterval(timertwas) // 在Vue实例销毁前，清除我们的定时器
      
    }
    if (timeDate) {
      clearInterval(timeDate) // 在Vue实例销毁前，清除我们的定时器
      timeDate
    }
  }
}
</script>
<style scoped lang="less">
.data-left-item-4 {
  display: flex;

  .item {
    height: 100%;
    width: 33%;
    padding-top: 30px;
  }
}

.center-top-num-flex {
  height: 80px;
  padding-top: 7px;
  display: flex;

  .item {
    flex: 1;
    text-align: center;
  }

  .text {
    color: #fcf0d8;
    font-size: 14px;
  }

  .num {
    font-size: 34px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
      Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
      sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: bold;
    color: #67caca;
  }
}

.left_top_main {
  width: 100%;
  height: 100%;
  position: relative;
}

.left_top_main .left {
  width: 200px;
  height: 100%;
  background: #ffccaa;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding-top: 80px;
  box-sizing: border-box;
}

.right-3 {
  display: flex;
  flex-direction: column;
  /* margin-top: 20px; */
}

.right-3 .right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-3 .item {
  text-align: left;
  border-bottom: 1px solid #549069;
  flex: 1;
  display: flex;
  padding: 5px 10px;
  margin: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.right-3 .item:last-child {
  border-bottom: 0;
}

.right-3 .item>div {
  color: white;
}

.right-3 .top {
  width: 60px;
  position: relative;
}

.data-rightttecahs {
  width: 100%;
  display: flex;
  height: 100%;
  // flex-direction: column;
  display: -webkit-box;
  /* Safari 6-7.1 and Chrome 21-40 */
  display: -moz-box;
  /* Firefox 18- */
  display: -ms-flexbox;
  /* IE 10 */

}

.data-right-sex {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    font-size: 16px;
  }
}

.right-3 .top span {
  position: absolute;
  width: 20px;
  line-height: 20px;
  top: 5px;
  text-align: center;
  border-radius: 5px;
}

.right-3 .top-1 span {
  background: #e80d0d;
}

.right-3 .top-2 span {
  background: #00c935;
}

.right-3 .top-3 span {
  background: #0083f4;
}

.right-3 .num {
  width: 88px;
}

.right-3 .pro-name {
  flex: 1;
}

.InfiniteScroll {
  box-sizing: border-box;

}

.scroll_parent_box {
  width: 100%;
  height: 15vh;

  overflow: hidden;
  box-sizing: border-box;

}

.scroll_list {
  transition: all 0ms ease-in 0s
}

.scroll_item {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #67caca;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;


}

.scroll_item div {
  color: #ffffff;
}

.scroll_item:hover {
  background: #0066FF;
  color: #ffffff;
}

.isddd {
  width: 25%;

}

.dataWrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px;
}

.data-left-font {
  font-size: 20px;
  color: #fff;
  padding-left: 8px;
}
</style>
